<template>
  <a-row class="fedbackContent">
    <!-- 触发弹窗的按钮 -->
    <a-col v-if="!questionId">
      <span v-show="!questionId" @click="showFeedbackForm">系统反馈</span>
    </a-col>
    <a-col v-else>
      <div @click="showFeedbackForm" class="content">
        <el-icon><Edit /></el-icon>
        <span style="margin-left: 8px">反馈异常</span>
      </div>
    </a-col>
    <!-- 弹窗 -->
    <a-modal
      v-model:visible="popupVisible"
      ok-text="确认"
      cancel-text="取消"
      @cancel="closefn"
      @ok="confirm"
      class="feedbackModal"
    >
      <template #title>
        <div
          style="
            width: 100%;
            text-align: center;
            border-bottom: 1px solid #e8e8e8;
            padding-bottom: 8px;
          "
        >
          {{ feedbackTitle }}
        </div>
      </template>
      <!-- 下拉框选择反馈类型 -->
      <div class="select">
        <a-radio-group v-model:value="abnormalTypeId">
          <a-radio
            v-for="item in abnormalTypeList"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-radio
          >
        </a-radio-group>
      </div>
      <div class="input">
        <a-textarea
          v-model:value="abnormalContent"
          placeholder="请输入您的反馈意见"
          allow-clear
          :rows="4"
          show-count
          :maxlength="500"
        />
      </div>
    </a-modal>
  </a-row>
</template>
  
  <script setup>
import { ref, onMounted } from "vue";
import { defineProps } from "vue";
import { Edit } from "@element-plus/icons-vue";
import { message, Modal, Select, Textarea, Button } from "ant-design-vue";
import http from "@/request";
import { noticStore } from "@/stores/notic";

// 定义变量
const noticFn = noticStore();
const { Option } = Select;

const abnormalContent = ref("");
const popupVisible = ref(false);
const abnormalTypeId = ref("1");
const abnormalTypeList = ref([]);
const props = defineProps({
  feedbackTitle: {
    type: String,
    default: "系统异常反馈",
  },
  feedbackButtonText: {
    type: String,
    default: "反馈异常",
  },
  // 是否显示问题ID
  questionId: {
    type: [String, Number],
    default: null,
  },
});
//获取系统反馈类型
onMounted(async () => {
  if (noticFn.getFeedbackList().length > 0) {
    abnormalTypeList.value = noticFn.getFeedbackList()
    return;
  } 
});

// 显示反馈表单
const showFeedbackForm = () => {
  popupVisible.value = true;
};
const closefn = () => {
  popupVisible.value = false;
  //清空反馈内容
  abnormalContent.value = "";
  abnormalTypeId.value = "1";
};
// 提交反馈
const confirm = async () => {
  // 校验
  if (!abnormalContent.value) {
    message.error("请输入反馈内容");
    return;
  }

  let requestData = {
    abnormalContent: abnormalContent.value,
    abnormalTypeId: props.questionId ? 3 : abnormalTypeId.value,
    type:2,
  };

  if (props.questionId) {
    requestData.questionId = props.questionId;
  }

  const {
    data: { code, data },
  } = await http.post("myAbnormal/add", requestData);

  if (code === 200) {
    message.success("提交成功");
    closefn();
  }
};
</script>
  
  <style lang="scss" scoped>
.fedbackContent {
  .ant-modal-dialog {
    width: 650px;
  }
  .select {
    width: 98%;
    margin-bottom: 36px;
  }

  .content {
    margin-left: 26px;
    font-size: 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}
.input {
  width: 98%;
  margin-bottom: 40px;
  margin-top: 22px;
}
.feedbackModal {
  ::v-deep .ant-modal .ant-modal-title {
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
  }
}
</style>